import React from 'react';
import {Component} from 'react';
import "./Login.css";
import Input from "../../Component/Input/Input";
import {Row, Col, Icon} from "antd";
import Logo from "../../Common/svg/Logo";
import RoundButton from "../../Component/RoundButton/RoundButton";
import SvgPhone from "../../Common/svg/LoginPhone";
import SvgLock from "../../Common/svg/LoginLock";
import SvgOauthQQ from "../../Common/svg/LoginOauthQQ";
import SvgOauthWechat from "../../Common/svg/LoginOauthWechat";

import User from "../../Server/User";
import Cookie from "../../utils/Cookie";

class Login extends Component {
    constructor(props){
        super();
        document.title="登陆";
        this.state={
            userName:"",
            psw:""
        }
    }
    login(){
        User.UserLogin(this.state.userName,this.state.psw)
        .then(response=>{
            // console.log(response)
            Cookie.setCookie("phone",response.data.userPhone);
            Cookie.setCookie("userID",response.data.userId);
            Cookie.setCookie("userName",response.data.userName);
            Cookie.setCookie("userHeadUrl",response.data.userHeadUrl);
            this.props.history.replace("/Home");
        },reject=>{
            this.SetErr(reject.msg);
            // console.log(reject)
        });
    }
    ClearErr(){
        this.setState({
            err:""
        });
    }
    SetErr(value){
        this.setState({
            err:value
        });
    }
    render() {
        return (
            <div className={"Login_Main"}>
                <div className={"Login_Panel"}>
                    <Row className={"Login_Logo"}>
                        <Logo width="4rem" height="3rem"/>
                    </Row>
                    <Row className={"Login_Input_Username"}>
                        <Input
                            type={"plain"}
                            placeholder={"手机号 / 邮箱"}
                            prefix={<Icon component={SvgPhone}/>}
                            autoComplete={"username"}
                            value={this.state.userName}
                            onChange={(e)=>this.setState({userName:e.target.value})}
                        />
                    </Row>
                    <Row className={"Login_Input_Password"}>
                        <Input
                            type={"password"}
                            placeholder={"输入密码"}
                            prefix={<Icon component={SvgLock}/>}
                            autoComplete={"current-password"}
                            value={this.state.psw}
                            onChange={(e)=>this.setState({psw:e.target.value})}
                        />
                    </Row>
                    <Row className={"Login_Hint"}>
                        <Col span={12}>还没帐号？快去<a href="/register" alt="register">立即注册</a></Col>
                        <Col span={12} style={{textAlign: "right"}}><a href="forgetPsw">忘记密码？</a></Col>
                    </Row>
                    <div>
                        <span><font color="red">{this.state.err}</font></span>
                    </div>
                    <Row className={"Login_Button"}>
                        <div  onClick={e=>this.login(e)}>
                            <RoundButton text={"登录"}/>
                        </div>
                    </Row>
                    <Row className={"Login_Oauth"}>
                        <div className={"Login_Oauth_Text"}>
                            —— 使用第三方帐号登录 ——
                        </div>
                        <div className={"Login_Oauth_Icon"}>
                            <SvgOauthQQ/>
                            <a href = 'https://open.weixin.qq.com/connect/qrconnect?appid=wxfb960ecb670f9980&redirect_uri=http%3a%2f%2ffly.mikumo.xyz%3a8080&response_type=code&scope=snsapi_login&state=3d6be0a4035d839573b04816624a415e#wechat_redirect'>
                                <SvgOauthWechat/>
                            </a>
                        </div>
                    </Row>
                </div>
            </div>
        );
    }
}

export default Login;